<template>
  <div class="mine-view">
    <div class="user-profile-card">
      <div class="avatar">
        <!-- 示例头像，请替换为实际用户头像 -->
        <img :src="user.avatar" alt="用户头像">
      </div>
      <div class="user-info">
        <h2>{{ user.nickname }}</h2>
        <p>个性签名：{{ user.signature }}</p>
        <div class="user-stats">
          <span>关注 <b>{{ user.following }}</b></span>
          <span>粉丝 <b>{{ user.followers }}</b></span>
        </div>
      </div>
      <button class="edit-profile-btn">编辑资料</button>
    </div>

    <div class="feature-section">
      <h3>我的内容</h3>
      <div class="feature-list">
        <div class="feature-item">
          <i class="fa fa-heart"></i>
          <span>我的收藏</span>
          <i class="fa fa-angle-right arrow"></i>
        </div>
        <div class="feature-item">
          <i class="fa fa-history"></i>
          <span>观看历史</span>
          <i class="fa fa-angle-right arrow"></i>
        </div>
        <div class="feature-item">
          <i class="fa fa-download"></i>
          <span>离线缓存</span>
          <i class="fa fa-angle-right arrow"></i>
        </div>
        <!-- 可以根据需要添加更多内容项 -->
      </div>
    </div>

    <div class="feature-section">
      <h3>帮助与设置</h3>
      <div class="feature-list">
        <div class="feature-item">
          <i class="fa fa-cog"></i>
          <span>设置</span>
          <i class="fa fa-angle-right arrow"></i>
        </div>
        <div class="feature-item">
          <i class="fa fa-question-circle"></i>
          <span>帮助与反馈</span>
          <i class="fa fa-angle-right arrow"></i>
        </div>
        <div class="feature-item">
          <i class="fa fa-info-circle"></i>
          <span>关于我们</span>
          <i class="fa fa-angle-right arrow"></i>
        </div>
        <!-- 可以根据需要添加更多设置项 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'; // 导入 ref

// 使用 ref 定义响应式数据
const user = ref({
  nickname: '用户昵称',
  signature: '看电影，品人生',
  followers: 500,
  following: 120,
  avatar: 'https://codelover.club/coursefiles/images/film/爱情.jpeg' // 更新头像链接
});

// 如果有方法，可以在这里直接定义，无需 methods 选项
// const someMethod = () => {
//   // ...
// };
</script>

<style src="../styles/Mine.css" scoped></style>